<template>
  <div class="filter-container">
    <el-select v-model="industry.i1" style="width:200px;" @change="i1Change">
      <el-option
        v-for="item in i1Options"
        :key="item.industryCode"
        :label="item.industryName"
        :value="item.industryCode"
      />
    </el-select>
    <el-select v-if="industry.i1!=''" v-model="industry.i2" style="width:200px;" @change="i2Change">
      <el-option
        v-for="item in i2Options"
        :key="item.industryCode"
        :label="item.industryName"
        :value="item.industryCode"
      />
    </el-select>
    <el-select v-if="industry.i2!=''" v-model="industry.i3" style="width:200px;" @change="i3Change">
      <el-option
        v-for="item in i3Options"
        :key="item.industryCode"
        :label="item.industryName"
        :value="item.industryCode"
      />
    </el-select>
    <el-select v-if="industry.i3!=''" v-model="industry.i4" style="width:200px;" @change="i4Change">
      <el-option
        v-for="item in i4Options"
        :key="item.industryCode"
        :label="item.industryName"
        :value="item.industryCode"
      />
    </el-select>
  </div>
</template>

<script>
import { fetchIndustryList } from '@/api/base/common'

export default {
  data() {
    return {
      i1Options: [],
      i2Options: [],
      i3Options: [],
      i4Options: [],
      industry: {
        i1: '',
        i2: '',
        i3: '',
        i4: ''
      }
    }
  },
  created() {
    this.industry = {
      i1: '',
      i2: '',
      i3: '',
      i4: ''
    }
    fetchIndustryList('').then(response => {
      this.i1Options = response.data
    })
  },
  methods: {
    valueFormate(options, cellValue) {
      if (options) {
        for (const d of options) {
          if (cellValue === d.industryCode) {
            return d.industryName
          }
        }
      }
      return cellValue
    },
    updateData(industryCode, industryName) {
      this.$emit('update:industrycode', industryCode)
      this.$emit('update:industryname', industryName)
    },
    i1Change(data) {
      this.updateData(data, this.valueFormate(this.i1Options, data))
      this.industry.i2 = ''
      this.industry.i3 = ''
      this.industry.i4 = ''
      fetchIndustryList(data).then(response => {
        this.i2Options = response.data
      })
    },
    i2Change(data) {
      this.updateData(data, this.valueFormate(this.i2Options, data))
      this.industry.i3 = ''
      this.industry.i4 = ''
      fetchIndustryList(data).then(response => {
        this.i3Options = response.data
      })
    },
    i3Change(data) {
      this.updateData(data, this.valueFormate(this.i3Options, data))
      this.industry.i4 = ''
      fetchIndustryList(data).then(response => {
        this.i4Options = response.data
      })
    },
    i4Change(data) {
      this.updateData(data, this.valueFormate(this.i4Options, data))
    }
  }
}
</script>
